<template>
  <div class="economyPage">
    <div class="economyLeft">
      <div class="header headerGreen">旅游经济总览</div>
      <div class="travelEco">
        <div class="left"></div>
        <div class="right">
          <p class="title">本年度全省旅游经济收入</p>
          <p class="money">6198.52<span>亿元</span></p>
          <p class="rate">
            <span>同比</span>
            <img src="../../assets/images/up.png" class="upIcon" />
            15.53%
          </p>
        </div>
      </div>
      <div class="header headerGreen">游客量数据总览</div>
      <div class="travelEco">
        <div class="left peopleLeft"></div>
        <div class="right">
          <p class="title">本年度全省旅游经济收入</p>
          <p class="money">6198.52<span>亿元</span></p>
          <p class="rate">
            <span>同比</span>
            <img src="../../assets/images/up.png" class="upIcon" />
            15.53%
          </p>
        </div>
      </div>
      <div class="travelTable">
        <dv-charts :option="chartOption" style="width: 100%; height: 100%" />
      </div>
    </div>
    <div class="economyCenter"></div>
    <div class="economyRight">
      <div class="header headerGreen">热门景区接待量</div>
      <div class="hotTravel">
        <div v-for="item of travelList" :key="item.id" class="travelItem">
          <div class="itemLeft"></div>
          <div class="itemRight">
            <p class="itemName">{{ item.name }}</p>
            <div class="info">
              <div class="left">
                <img
                  src="../../assets/images/economy/moneyIcon.png"
                  class="icon"
                />
                <p class="moneyCount">{{ item.moneyCount }}<span>万</span></p>
                <p class="rate">
                  <img src="../../assets/images/up.png" class="upIcon" />
                  {{ item.moneyRate }} %
                </p>
              </div>
              <div class="right">
                <img
                  src="../../assets/images/economy/peopleIcon.png"
                  class="icon"
                />
                <p class="peopleCount">{{ item.peopleCount }}<span>万</span></p>
                <p class="rate">
                  <img src="../../assets/images/up.png" class="upIcon" />
                  {{ item.peopleRate }} %
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header headerGreen">旅游收入占比</div>
      <div class="travelChart">
        <dv-charts
          :option="travelRateOption"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        title: {
          show: false,
        },
        legend: {
          data: [
            {
              name: "人口年龄",
              color: "#F88C0C",
            },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "10%",
          bottom: "30%",
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          }
        },
        series: [
          {
            name: "人口年龄",
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            barWidth: '20%',
            gradient: {
              color: ["#F88C0C", "#FFB538"],
            },
          },
        ],
      },
      travelList: [
        {
          id: 1,
          name: "泸沽湖国家级风景名胜区",
          moneyCount: 68.52,
          moneyRate: 13.5,
          peopleCount: 168.35,
          peopleRate: 12.3,
        },
        {
          id: 2,
          name: "泸沽湖国家级风景名胜区",
          moneyCount: 68.52,
          moneyRate: 13.5,
          peopleCount: 168.35,
          peopleRate: 12.3,
        },
        {
          id: 3,
          name: "泸沽湖国家级风景名胜区",
          moneyCount: 68.52,
          moneyRate: 13.5,
          peopleCount: 168.35,
          peopleRate: 12.3,
        },
        {
          id: 4,
          name: "泸沽湖国家级风景名胜区",
          moneyCount: 68.52,
          moneyRate: 13.5,
          peopleCount: 168.35,
          peopleRate: 12.3,
        },
      ],
      travelRateOption: {
        legend: {
          data: ["门票", "购物", "餐饮", "交通", "酒店"],
          orient: "vertical",
          textStyle: {
            fontFamily: "Arial",
            fontSize: 13,
            fill: "#fff",
          },
        },
        series: [
          {
            name: "门票",
            type: "pie",
            data: [
              { name: "门票", value: 25 },
              { name: "购物", value: 26 },
              { name: "餐饮", value: 13 },
              { name: "交通", value: 21 },
              { name: "酒店", value: 15 },
            ],
            radius: ["80%", "50%"],
            insideLabel: {
              show: true,
            },
          },
          { name: "购物" },
          { name: "餐饮" },
          { name: "交通" },
          { name: "酒店" },
        ],
        color: [],
      },
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//economy.scss";
</style>
